import React, { Component } from 'react';
import { Card, Button, Table, Modal, message } from 'antd';
import BaseForm from '../../components/base_form';
import { connect } from 'react-redux';
import { getOrderListData } from './store/actions';

const formList = [
  {
    type: 'SELECT',
    label: '城市',
    field: 'city',
    placeholder: '全部',
    initialValue: '1',
    width: 100,
    list: [{ id: '0', name: '全部' }, { id: '1', name: '北京' }, { id: '2', name: '上海' }, { id: '3', name: '深圳' }]
  },
  {
    type: '时间查询'
  },
  {
    type: 'SELECT',
    label: '订单状态',
    field: 'status',
    placeholder: '全部',
    initialValue: '1',
    width: 100,
    list: [{ id: '0', name: '全部' }, { id: '1', name: '进行中' }, { id: '2', name: '结束行程' }]
  }
];

class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: '',
      selectedItem: {},
      selectedRows: [],
    }
  }

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: 'radio',
      selectedRowKeys
    }
    const columns = [
      {
        title: '订单编号',
        dataIndex: 'orderSn'
      },
      {
        title: '商品编号',
        dataIndex: 'bikeSn'
      },
      {
        title: '用户名',
        dataIndex: 'userName'
      },
      {
        title: '手机号',
        dataIndex: 'mobile'
      },
      {
        title: '城市',
        dataIndex: 'distance'
      },
      {
        title: '地址',
        dataIndex: 'totalTime'
      },
      {
        title: '状态',
        dataIndex: 'status',
        render(status) {
          const config = {
            '1': '已付款',
            '2': '未付款',
            '3': '已结束'
          }
          return config[status];
        }
      },
      {
        title: '下单时间',
        dataIndex: 'startTime'
      },
      {
        title: '付款时间',
        dataIndex: 'endTime'
      },
      {
        title: '订单金额',
        dataIndex: 'totalFee'
      },
      {
        title: '实付金额',
        dataIndex: 'userPay'
      }
    ];
    const { orderList } = this.props;
    return (
      <div>
        <Card className="pinlor-cards">
          <BaseForm formList={formList} filterSubmit={this.handleFilter} />
        </Card>
        <Card className="pinlor-buttons">
          <Button onClick={this.toOrderDetail}>订单详情</Button>
          <Button onClick={this.handleEndOrder}>结束订单</Button>
        </Card>
        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={orderList}
            rowSelection={rowSelection}
            onRow={
              (record, index) => {
                return {
                  onClick: () => {
                    this.onRowClick(record)
                  }
                }
              }
            }
            pagination={false} />
        </div>
      </div>
    )
  }

  componentDidMount() {
    this.props.getOrderList({
      page: 1
    });
  }

  onRowClick = record => {
    // 点击表格行选中
    const selectKey = [record.id];
    Modal.info({
      title: '信息',
      content: `用户名：${record.userName},订单号：${record.orderSn}`
    });
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  };

  handleEndOrder = () => {
    // 结束订单
    message.success(`订单${this.state.selectedRowKeys}已结束`)
  };

  toOrderDetail = () => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys === '') {
      message.error('请先选择一条数据');
      return;
    }
    this.props.history.push(`/orderdetail/${selectedRowKeys}`)
  };

  handleFilter = params => {
    console.log(JSON.stringify(params, null, 2));
    this.props.getOrderList(params);
  }
}


const mapStateToProps = state => ({
  orderList: state.orderList.orderListData.result
});
const mapDispatchToProps = dispatch => ({
  getOrderList: data => {
    dispatch(getOrderListData(data))
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(Order);
